<template>
	<view class="get-height">
		<view class="search-box flex_cc">
			<view class="input-box flex_fsc">
				<uni-icons type="search" color="#585C66" size="20"></uni-icons>
				<input type="text" placeholder="输入搜索关键字" placeholder-class="uni-placeholder">
			</view>
		</view>
		<view class="line-spacing" style="height: 20rpx;"></view>
		<view class="screening-box flex_sbc">
			<view class="flex_cc">
				<view>全部标签</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="icon-size-32"></image>
			</view>
			<view class="flex_cc">
				<view>智能排序</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-screening-down.png'" class="icon-size-32"></image>
			</view>
			<view class="flex_cc screening-buttion">
				<view>筛选</view>
				<image :src="setting.oss_pub_domain + '/app-img/player/icon_screening.png'" class="icon-size-32"></image>
			</view>
		</view>
	</view>
	<scroll-view v-if="topHeight" scroll-y :style="{height: `calc(100vh - ${topHeight}px - 192srpx)`}">
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle" color="#C0C4CC" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
		<view class="screening-item flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'"></image>
			<view>
				<view class="flex_sbc">
					<view>沙坑球基本技术动作练习</view>
					<uni-icons type="circle-filled" color="#008965" size="20"></uni-icons>
				</view>
				<view class="uni-color-grey z-font-24 uni-mt-8">国家级运动员指导上肢综合训练，高尔夫技巧轻松掌握</view>
			</view>
		</view>
	</scroll-view>
	<bottom-box :buts="buts" @change="buttonClick" :interval="false"></bottom-box>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
	const { proxy: that } = getCurrentInstance()
	
	const topHeight = ref(0)
	onMounted(() => {
		const query = uni.createSelectorQuery()
		query.select('.get-height').boundingClientRect(data => {
			topHeight.value = data.height
		}).exec()
	})
	
	const buts = [{
		label: '重置',
		bgColor: 'uni-orange-bg',
		width: 300,
	}, {
		label: '确定',
		bgColor: 'uni-color-main-bg',
		width: 300,
	}]
	
	function buttonClick(e) {
		console.log(e);
	}
</script>

<style lang="scss">
	@import 'msg-selet.scss'
</style>
